import { Toast } from 'vant';
import cTitle from 'components/title';
import { Loading } from 'element-ui';
const loadingOptions = {
  background: 'rgba(0, 0, 0, .6)',
  text: '正在提交...'
};
export default {
  components: { cTitle },
  data() {
    return {
      imageUrl: '',
      uploadUrl: '',
      upImgSrc: '',
      amount: '',
      remarks: '',
      remittanceInfo: {},
      clipboardValue: ''
    };
  },

  methods: {
    /**
     * 限制金额内容只能输入金额格式
     * @param {String} value input值
     */
    amountInput: function(value) {
      //先把非数字的都替换掉，除了数字和.
      value = value.replace(/[^\d.]/g,"");
      //必须保证第一个为数字而不是.
      value = value.replace(/^\./g,"");
      //保证只有出现一个.而没有多个.
      value = value.replace(/\.{2,}/g,".");
      //保证.只出现一次，而不能出现两次以上
      value = value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
      //保证.后只出现2位
      value = value.replace(/([0-9]+\.[0-9]{2})[0-9]*/,"$1");
      //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
      if(value.indexOf(".")< 0 && value !=""){
        value = parseFloat(value);
      }
      this.amount = value;
    },
    /*vant图片上传*/
    onRead(e) {
      let fd = new FormData();
      const uploadUrl = this.uploadUrl = this.fun.getRealUrl('upload.uploadPic', {});
      fd.append('file', e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      var That = this;
      axios
        .post(uploadUrl, fd, {
          headers: { 'Content-Type': 'multipart/form-data' }
        })
        .then(response => {
          var responseData = response.data;
          if (responseData.result == 1) {
            That.imageUrl = URL.createObjectURL(e.file);
            That.upImgSrc = responseData.data.img;
          } else {
            Toast(responseData.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    /**
     * 提交
     */
    confirmEvent: function() {
      if (!this.amount) {
        this.$toast('请输入充值金额');
        return;
      }
      if (!this.upImgSrc) {
        this.$toast('请上传充值凭证');
        return;
      }
      const json = {
        num: this.amount,
        remark: this.remarks,
        enclosure: this.upImgSrc,
        explain: this.remarks,
      };
      const that = this;
      let loadingInstance = Loading.service(loadingOptions); 
      $http.get('finance.Recharge.index', json).then(
        function(response) {
          loadingInstance.close();
          if (response.result == 1) {
            that.$dialog.alert({ message: response.msg}).then(function() {
              that.$router.replace(that.fun.getUrl("balance"));
            });
            Toast(response.msg);
          } else {
            Toast(response.msg);
          }
        },
        function (response) {
          loadingInstance.close();
          Toast(response.msg);
        }
      ).finally(function() {
        loadingInstance.close();
      });
    },

    /**
     * 获取汇款信息
     */
    getPay: function() {
      const that = this;
      $http.get('finance.Recharge.getPay', {})
        .then(function(response) {
          const { result, data } = response;
          if (result == 1) {
            that.remittanceInfo = data;
            // 复制到汇款信息
            Object.keys(data).forEach(key => {
              if (key == 'remittance_bank') {
                that.clipboardValue += `开户行: ${data[key]};`;
              } else if(key == 'remittance_sub_bank') {
                that.clipboardValue += `开户支行: ${data[key]};`;
              } else if(key == 'remittance_bank_account_name') {
                that.clipboardValue += `开户名: ${data[key]};`;
              } else if(key == 'remittance_bank_account') {
                that.clipboardValue += `开户账号: ${data[key]};`;
              }
            });
          }
        });
    },

    // 复制
    onCopy: function(e) {
      Toast({
        message: "复制成功",
        duration: 1000
      });
    },
    onError: function(e) {
      Toast({
        message: "复制失败",
        duration: 1000
      });
    }
  },

  activated() {
    this.imageUrl = '';
    this.uploadUrl = '';
    this.upImgSrc = '';
    this.amount = '';
    this.remarks = '';
    this.remittanceInfo = {};
    this.clipboardValue = '';
    this.getPay();
  }
};
